<template>
	<!-- Footer组件 -->
	<div class="bili-footer">
		<div class="footer-center">
			<div class="footer-wrap">
				<div class="link-box">
					<div class="box-left">
						<span class="left-title">bilibili</span>
						<div class="left-center">
							<a
								target="_blank"
								href="https://www.bilibili.com/blackboard/aboutUs.html"
								>关于我们</a
							>
							<a
								target="_blank"
								href="https://www.bilibili.com/blackboard/contact.html"
								>联系我们</a
							>
							<a
								target="_blank"
								href="https://www.bilibili.com/protocal/licence.html"
								>用户协议</a
							>
							<a
								target="_blank"
								href="https://www.bilibili.com/blackboard/join.html"
								>加入我们</a
							>
							<a
								target="_blank"
								href="https://www.bilibili.com/blackboard/friends-links.html"
								>友情链接</a
							>
							<a
								target="_blank"
								href="https://www.bilibili.com/blackboard/privacy-pc.html"
								>隐私协议</a
							>
							<a
								target="_blank"
								href="https://account.bilibili.com/account/official/home"
								>bilibili认证</a
							>
							<a target="_blank" href="https://ir.bilibili.com/">Investor</a>
							<a target="_blank" href="https://ir.bilibili.com/">Relations</a>
						</div>
					</div>
					<div class="box-left">
						<span class="left-title">传送门</span>
						<div class="left-center">
							<a
								target="_blank"
								href="https://www.bilibili.com/blackboard/topic/activity-cn8bxPLzz.html"
								>协议汇总</a
							>
							<a
								target="_blank"
								href="https://www.bilibili.com/blackboard/activity-list.html"
								>活动中心</a
							>
							<a
								target="_blank"
								href="https://www.bilibili.com/blackboard/topic_list.htm"
								>活动专题页</a
							>
							<a
								target="_blank"
								href="https://www.bilibili.com/v/copyright/intro/"
								>侵权申诉</a
							>
							<a
								target="_blank"
								href="https://www.bilibili.com/blackboard/help.html"
								>帮助中心</a
							>
							<a
								target="_blank"
								href="https://www.bilibili.com/blackboard/activity-5zJxM3spoS.html"
								>社区中心</a
							>
							<a target="_blank" href="https://space.bilibili.com/6823116"
								>壁纸站</a
							>
							<a target="_blank" href="https://e.bilibili.com/">广告合作</a>
							<a
								target="_blank"
								href="https://www.bilibili.com/blackboard/activity-S1jfy69Jz.html"
								>名人堂</a
							>
							<a
								target="_blank"
								href="https://mcn.bilibili.com/studio/mcn/entry"
								>MCN管理中心</a
							>
							<a
								target="_blank"
								href="https://www.bilibili.com/video/BV1Xx411c7cH/"
								>高级弹幕</a
							>
							<a target="_blank" href="https://b.bilibili.com/">品牌号官网</a>
						</div>
					</div>
					<div class="box-right">
						<div
							class="right-center"
							@mouseenter="loadAppEnter"
							@mouseleave="loadAppLeave"
						>
							<a target="_blank" href="https://app.bilibili.com/">
								<div class="center-div one">
									<span class="iconfont icon-xiazai"></span>
								</div>
								<p>下载APP</p>
							</a>
							<div v-show="isShowCode === 1" class="loadApp">
								<img
									src="./images/Snipaste_2022-04-14_23-42-13.png"
									alt="扫码下载App"
								/>
								<span>扫码即可下载手机APP</span>
							</div>
						</div>

						<div class="right-center">
							<a target="_blank" href="https://love.bilibili.com/"
								><div class="center-div two">
									<span class="iconfont icon-gongyi"></span>
								</div>
								<p>公益</p></a
							>
						</div>
						<div
							class="right-center"
							@mouseenter="followWeiboEnter"
							@mouseleave="followWeiboLeave"
						>
							<a target="_blank" href="https://weibo.com/bilibiliweb"
								><div class="center-div three">
									<span class="iconfont icon-xinlangweibo"></span>
								</div>
								<p>官方微博</p></a
							>
							<div v-show="isShowCode === 2" class="loadApp">
								<img
									src="./images/Snipaste_2022-04-14_22-36-06.png"
									alt="扫码关注官方微博"
								/>
								<span>扫码关注官方微博</span>
							</div>
						</div>
						<div
							class="right-center"
							@mouseenter="followWeixinEnter"
							@mouseleave="followWeiboLeave"
						>
							<a href="#"
								><div class="center-div four">
									<span class="iconfont icon-weixin"></span>
								</div>
								<p>官方微信</p></a
							>
							<div v-show="isShowCode === 3" class="loadApp-left">
								<div class="fuwuhao">
									<img
										src="./images/Snipaste_2022-04-14_22-39-29.png"
										alt="会员微信服务号"
									/>
									<span>会员微信服务号</span>
								</div>
								<div class="danmu">
									<img
										src="./images/Snipaste_2022-04-14_22-38-30.png"
										alt="哔哩哔哩弹幕网"
									/>
									<span>哔哩哔哩弹幕网</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="split-line"></div>
				<div class="other-link">
					<div class="link-center">
						<div class="link-item">
							<a class="item-message" target="_blank" href="#">营业执照</a>
							<span class="item-message"
								>信息网络传播视听节目许可证：0910417</span
							>
							<span class="item-message"
								>网络文化经营许可证 沪网文 【2019】3804-274号</span
							>
							<span class="item-message"
								>广播电视节目制作经营许可证：（沪）字第01248号</span
							>
							<span class="item-message"
								>增值电信业务经营许可证 沪B2-20100043</span
							>
						</div>
						<div class="link-item">
							<span class="item-message"
								>互联网ICP备案：沪ICP备13002172号-3</span
							>
							<span class="item-message"
								>出版物经营许可证 沪批字第U6699 号</span
							>
							<span class="item-message"
								>互联网药品信息服务资格证 沪-非经营性-2016-0143</span
							>
							<span class="item-message"
								>营业性演出许可证 沪市文演（经）00-2253 |</span
							>
						</div>
						<div class="link-item">
							<a
								class="item-message"
								target="_blank"
								href="mailto:help@bilibili.com"
								>不良信息举报邮箱：help@bilibili.com</a
							>
							<a
								class="item-message"
								target="_blank"
								href="mailto:teenprotect@bilibili.com"
								>涉未成年举报邮箱：teenprotect@bilibili.com</a
							>
							<div class="hz-bg1 sprit"></div>
							<a
								class="item-message"
								target="_blank"
								href="https://www.shjbzx.cn/"
								>上海互联网举报中心 |</a
							>
							<a
								class="item-message"
								target="_blank"
								href="https://jbts.mct.gov.cn/"
								>12345政务服务便民热线 |</a
							>
						</div>
						<div class="link-item">
							<div class="hz-bg2 sprit"></div>
							<a
								class="item-message"
								target="_blank"
								href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011002002436"
								>沪公网安备31011002002436号 |</a
							>
							<div class="hz-bg3 sprit"></div>
							<a
								class="item-message"
								target="_blank"
								href="mailto:userreport@bilibili.com"
								>儿童色情信息举报专区 |</a
							>
							<a
								class="item-message"
								target="_blank"
								href="https://www.shdf.gov.cn/shdf/channels/740.html"
								>扫黄打非举报</a
							>
						</div>
						<div class="link-item">
							<span class="item-message">网上有害信息举报专区：</span>
							<a
								class="item-message"
								target="_blank"
								href="https://www.12377.cn/"
								>中国互联网违法和不良信息举报中心</a
							>
							<span class="item-message"
								>亲爱的市民朋友，上海警方反诈劝阻电话“96110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。</span
							>
						</div>
					</div>
				</div>
				<div class="footer-icons">
					<img src="./images/Dm9M9DZArS.png" />
					<img src="./images/2xfuvJItn3.png" />
					<img src="./images/iUlvDrrAnu.png" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "FooterComp",
	data() {
		return {
			isShowCode: 0,
		};
	},
	methods: {
		loadAppEnter() {
			this.isShowCode = 1;
		},
		loadAppLeave() {
			this.isShowCode = 0;
		},
		followWeiboEnter() {
			this.isShowCode = 2;
		},
		followWeiboLeave() {
			this.isShowCode = 0;
		},
		followWeixinEnter() {
			this.isShowCode = 3;
		},
		followWeixinLeave() {
			this.isShowCode = 0;
		},
	},
};
</script>

<style lang="less" scoped>
.bili-footer {
	background-color: #f6f7f8;
	width: 100%;
	.footer-center {
		font-size: 12px;
		padding: 30px 0;
		position: relative;
		z-index: 1;
		width: 1300px;
		margin: 0 auto;
		.footer-wrap {
			margin: 0 56px;
			.link-box {
				display: flex;
				font-size: 14px;
				margin-bottom: 30px;
				justify-content: space-between;

				.box-left {
					.left-title {
						display: block;
						margin-bottom: 10px;
						height: 20px;
						color: #9499a8;
						font-size: 16px;
					}
					.left-center {
						a {
							display: inline-block;
							margin-right: 12px;
							margin-bottom: 4px;
							line-height: 24px;
							color: #18191c;
							text-decoration: none;
						}
					}
				}
				.box-right {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-right: 0;
					padding-right: 0;
					border-right: none;
					flex-shrink: 0;
					.right-center {
						display: flex;
						margin: 0 8px;
						position: relative;
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						.loadApp {
							width: 180px;
							height: 160px;
							border-radius: 5px;
							border: 1px solid #e8eaeb;
							background-color: #ffffff;
							padding: 20px 0 0 0;
							position: absolute;
							bottom: 120px;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							img {
								border: 1px solid #e8eaeb;
								width: 100px;
								border-radius: 5px;
								margin-bottom: 8px;
							}
							span {
								display: inline-block;
								font-size: 12px;
								color: #656a71;
							}
						}
						.loadApp-left {
							height: 180px;
							background-color: #ffffff;
							border: 1px solid #e8eaeb;
							border-radius: 5px;
							display: flex;
							position: absolute;
							bottom: 120px;
							.fuwuhao {
								padding: 15px 20px 0 40px;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								img {
									border: 1px solid #e8eaeb;
									width: 100px;
									border-radius: 5px;
									margin-bottom: 8px;
								}
								span {
									display: inline-block;
									font-size: 12px;
									color: #656a71;
								}
							}
							.danmu {
								padding: 15px 40px 0 20px;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								img {
									border: 1px solid #e8eaeb;
									width: 100px;
									border-radius: 5px;
									margin-bottom: 8px;
								}
								span {
									display: inline-block;
									font-size: 12px;
									color: #656a71;
								}
							}
						}
						a {
							text-decoration: none;
							color: #18191c;
							transition: color 0.3s;
							p {
								margin-top: 10px;
								height: 20px;
								color: #18191c;
								transition: color 0.2s;
								text-align: center;
								white-space: nowrap;
							}
							.center-div {
								display: flex;
								width: 56px;
								height: 56px;
								align-items: center;
								justify-content: center;
								border-radius: 50%;
							}
							.one {
								background-color: #3752c8;
								.icon-xiazai {
									font-size: 25px;
									color: #ffffff;
								}
							}
							.two {
								background-color: #00aeec;
								.icon-gongyi {
									font-size: 25px;
									color: #ffffff;
								}
							}
							.three {
								background-color: #db4437;
								.icon-xinlangweibo {
									font-size: 25px;
									color: #ffffff;
								}
							}
							.four {
								background-color: #57bb40;
								.icon-weixin {
									font-size: 25px;
									color: #ffffff;
								}
							}
						}
					}
				}
			}
			.split-line {
				margin: 0 auto;
				width: 80%;
				height: 1px;
				background-color: #e3e5e7;
			}
			.other-link {
				display: flex;
				margin-bottom: 20px;
				padding-top: 30px;
				color: #9499a0;
				.link-center {
					width: 1040px;
					flex-shrink: 0;
					margin: 0 auto;
					text-align: center;
					.item-message {
						margin-right: 8px;
						color: #9499a0;
						text-align: center;
						font-size: 12px;
						line-height: 24px;
						text-decoration: none;
					}
					a {
						&:hover {
							color: #3752c8;
						}
					}
					.sprit {
						background-image: url("./images/hz_icon.png");
						display: inline-block;
						margin-right: 3px;
						background-repeat: no-repeat;
						vertical-align: middle;
					}
					.hz-bg1 {
						width: 16px;
						height: 16px;
						background-position: 0 -2px;
					}
					.hz-bg2 {
						width: 18px;
						height: 20px;
						background-position: -41px 0px;
					}
					.hz-bg3 {
						width: 16px;
						height: 16px;
						background-position: -18px -3px;
					}
				}
			}
			.footer-icons {
				margin: 0 auto;
				width: 400px;
				img {
					width: 96px;
					height: 39px;
					display: inline-block;
					margin-right: 20px;
					vertical-align: middle;
					border-style: none;
					border: 0;
				}
			}
		}
	}
}
</style>
